<template>
	<uni-popup ref="popup" type="bottom" :is-mask-click="false">
		<view class="bg-white" style="border-radius:12px 12px 0px 0px;">
			<view class="flex justify-end p-12">
				<image class="size-32" src="@/static/svg/icon-popup-close.svg" @click="onClose"></image>
			</view>
			<view class="px-32 pb-40" style="max-height: 70vh; overflow: auto;">
				<template v-if="useDetails && useDetails.details">
				  <view class="text-color-regular fs-14 font-semibold leading-22 mb-8">使用说明</view>
				  <view v-if="useDetails && useDetails.details" class="text-color-regular fs-12 font-normal leading-22 mb-24">
					{{useDetails.details}}
				  </view>
				</template>
				<template v-if="useDetails && useDetails.merchantNames">
				  <view class="text-color-regular fs-14 font-semibold leading-22 mb-8">可用商户</view>
				  <view v-if="useDetails && useDetails.merchantNames" class="grid" style="grid-gap:12px;">
					<view v-for="(item,index) in useDetails.merchantNames" :key="index" class="flex center px-8 py-4 radius-4 bg-default text-color-regular fs-12 font-normal leading-22">{{item}}
					</view>
				  </view>
				</template>
				<view v-if="showCode && verifyCode" class="mt-20 radius-8 bg-primary h-46 flex center fs-16 text-white" @click="toShowVerifyCode">
					<text>显示核销码</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		unref
	} from 'vue'
	import {
		getUseDetailsApi
	} from '@/api/activity.js'
	
	const props = defineProps({
		verifyCodeTitle: {
			type: String
		},
		verifyCode: {
			type: String
		},
		// 是否显示“显示核销码按钮”
		showCode: {
			type: Boolean,
			default: true
		},
		// 状态(1-待核销，2-已核销，3-已取消，4-已过期)
		codeState: {
			type: [Number, String]
		}
	})
	
	const emits = defineEmits(['onShowVerifyCode'])

	const popup = ref(null)

	const onClose = () => {
		popup.value && popup.value.close()
	}

  const params = ref({
    activeGoodsId: 0,
    subOrderId: 0
  })
	const useDetails = ref(null)

	const showDialog = async (value, id, field) => {
		if (value) {
      console.log(params.value)
      console.log(value)
      if (field === 'subOrderId') {
        params.value.subOrderId = id
        params.value.activeGoodsId = 0
      } else {
        params.value.subOrderId = 0
        params.value.activeGoodsId = id
      }
			await getUseDetails()
			popup.value && popup.value.open()
		} else {
			popup.value && popup.value.close()
		}
	}

	const getUseDetails = () => {
		getUseDetailsApi(unref(params)).then(res => {
			useDetails.value = res
		})
	}
	
	const toShowVerifyCode = () => {
		emits('onShowVerifyCode', {
			verifyCodeTitle: props.verifyCodeTitle,
			verifyCode: props.verifyCode,
			codeState: props.codeState,
		})
	}

	defineExpose({
		showDialog
	})
</script>
